import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import Components from "unplugin-vue-components/vite";
import { VantResolver } from "unplugin-vue-components/resolvers";
import { VitePWA } from "vite-plugin-pwa";

import path from "path";

export default defineConfig({
  publicPath: process.env.NODE_ENV === "production" ? "./" : "/",
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()], // 自动导入 Vant 组件
    }),
    VitePWA({
      // 必须启用 Service Worker
      registerType: "autoUpdate",
      injectRegister: "auto", // 自动注入注册逻辑（与手动调用 registerSW 兼容）
      devOptions: {
        enabled: true,
        type: "module", // 开发环境需指定为 module 类型
      },
      workbox: {
        // 缓存所有静态资源（CSS、JS、图片等）
        globPatterns: ["**/*.{js,css,html,png,jpg,jpeg,svg,gif}"],
        // 缓存策略：优先使用缓存，网络同步更新（适合离线访问）
        runtimeCaching: [
          {
            urlPattern: /\.(?:png|jpg|jpeg|svg|gif)$/, // 图片资源
            handler: "CacheFirst",
            options: {
              cacheName: "images",
              expiration: {
                maxEntries: 60,
                maxAgeSeconds: 30 * 24 * 60 * 60,
              }, // 30天过期
            },
          },
          {
            urlPattern: /\.(?:js|css|html)$/, // 脚本、样式、HTML
            handler: "StaleWhileRevalidate",
            options: {
              cacheName: "static-resources",
            },
          },
        ],
      },
      manifest: {
        name: "怪兽漫画", // PWA应用的完整名称
        short_name: "怪兽漫画", // PWA应用的短名称
        description: "应用描述", // 应用程序的描述
        theme_color: "#ffffff", // 应用程序的主题颜色
        icons: [
          {
            src: "assets/logo-tu1.png", // 图标路径，相对public目录，可根据实际情况修改
            sizes: "192x192", // 图标尺寸
            type: "image/png", // 图标类型
          },
          {
            src: "assets/logo-tu.png",
            sizes: "512x512",
            type: "image/png",
          },
        ],
      },
    }),
  ],
  css: {
    postcss: {},
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/common/style/style.scss";`,
      },
    },
  },
  resolve: {
    alias: {
      // 使用绝对路径拼接，确保指向项目根目录的 src
      "@": path.join(__dirname, "src"), // 用 path.join 替代 path.resolve（兼容性更好）
    },
    extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json", ".vue"], // 确保识别 vue 文件
    assetsInclude: [
      "**/*.jpg",
      "**/*.jpeg",
      "**/*.png",
      "**/*.gif",
      "**/*.JPG",
    ],
  },
  server: {
    port: 5178, // 可选：指定端口（默认5173）
    // open: true, // 可选：启动后自动打开浏览器
    proxy: {
      "/api": {
        // 匹配请求路径的前缀
        // target: "http://47.104.140.61:8183/sqx_fast", // 测试  8.137.164.178
        // target: "http://52.74.47.75:8183/sqx_fast", // 正式
        target: "http://8.137.164.178:8183/sqx_fast", // 预发布
        changeOrigin: true, // 修改请求的 Origin 为目标服务器的 Origin
        rewrite: (path) => path.replace(/^\/api/, ""), // 路径重写规则
      },
      // '/oss-img': {
      // 	target: 'https://manhuas.oss-cn-chengdu.aliyuncs.com', // 正确：OSS 域名
      // 	changeOrigin: true, // 正确：必须开启，模拟 OSS 域名的请求头
      // 	rewrite: (path) => path.replace(/^\/oss-img/, ''), // 关键：路径重写是否正确
      // },
      "/oss-img": {
        // 用更独特的前缀，避免与其他接口冲突
        target: "https://manhuas.oss-cn-chengdu.aliyuncs.com",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/oss-img/, ""),
        // 强制设置响应头（部分场景需要）
        configure: (proxy) => {
          proxy.on("proxyRes", (proxyRes) => {
            proxyRes.headers["Access-Control-Allow-Origin"] = "*";
          });
        },
        headers: {
          Accept: "text/plain", // 明确请求文本类型
          "User-Agent":
            "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36",
        },
      },
    },
  },
});
